@import './common';
@import '../../../assets/css/variable.less';
@import '../../../assets/css/com-mixin.less';

// 说明：输入表单类包括：input、select、datepicker、timepicker、cascader等表单类型组件

// ***** form variable ***** 
@input-icon-color :fade(#fff, 60%); // 输入框icon颜色
// 表单标签样式（input、select、datepicker、timepicker、cascader）
@label-color      : #D3D6D9; // 输入框标签颜色
@label-size       : 16px; // 输入框字体大小
@label-mr         : 8px; // 标签与输入框的间隔margin-right

// 表单样式（input、select、datepicker、timepicker、cascader）
@input-font-size    : 14px;
@input-text-color   : #D3D6D9;
@placeholder-color  : rgba(118, 135, 156, 1); // placeholder
@input-width-short  : 110px; // input宽度-short
@input-width-middle : 240px; // input高度-middle
@input-width-long   : 583px; // input高度-long
@input-height       : 32px; // input高度

// 边框（input、select、datepicker、timepicker、cascader）
@input-border : #ECEEF0; // 输入框边框

// 背景（input、select、datepicker、timepicker、cascader）
@input-bg : #F4F6FA; // 2. 按钮

// 前置、后置内容（input、select）
@input-pend-color : @text-color-sub; // prepend & append
@input-pend-bg    : #33515f; // prepend & append

// switch开关
@switch-text         : @text-color;
@switch-text-active  : @text-color;
@switch-text-disabled: @text-color-disabled;
@switch-bg-active    : @main-color;
@switch-bg-disabled  : #86AAAE;


// ***** mixin class ***** 
// 必填写项修饰*号
.required {
  &::before {
    content     : '*';
    color       : red;
    margin-right: 4px;
  }
}

// placeholder（不带input标签的组件）
.placeholder {
  font-size: @input-font-size;
  color    : @placeholder-color  !important;
}

// 带input框=标签的组件
.input-placeholder {

  &::-webkit-input-placeholder {
    .placeholder();
  }

  &::-moz-input-placeholder {
    .placeholder();
    /* Mozilla Firefox 19+ */
  }

  &::-ms-input-placeholder {
    .placeholder();
    /* Internet Explorer 10-11 */
  }
}

// 输入框标签样式
.input-label {
  font-size   : @label-size;
  color       : @label-color;
  margin-right: @label-mr;
}

// input文本（字体&颜色）
.input-text {
  font-size: @input-font-size;
  color    : @input-text-color;
}

// 输入框容器与标签布局（flex布局）
.input-layout {
  display           : inline-flex;
  align-items       : center;
  // justify-content: flex-end;
}

// 输入框宽度（3种width）
.input-width {
  &.input-long {
    width: @input-width-long;
  }

  &.input-middle {
    width: @input-width-middle;
  }

  &.input-short {
    width: @input-width-short;
  }

  &.input-auto {
    width: auto;
  }
}

// 输入框高度（height & line-height）
.input-height {
  height     : @input-height;
  line-height: @input-height;
}

// ** 输入框样式（边框&背景）
.input-view {
  border       : @input-border;
  background   : @input-bg;
  // box-shadow: 0px 0px 8px 0px rgba(0, 7, 17, 0.8);
  border-radius: 3px;

  &:hover {
    .border(@main-color);
  }

  &:focus {
    box-shadow: 0px 0px 6px 0px rgba(133, 247, 220, 0.4), inset 0px 0px 8px 0px rgba(0, 0, 0, 0.48);
    .border(@main-color);
  }

  &.ivu-input-disabled {
    opacity: 0.5;
    border : @input-border;
  }

  .ivu-select-arrow {
    color: #808695 !important;
  }
}


.input-show-scroll {
  overflow-y: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width        : 6px;
    height       : 6px;
    background   : transparent;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    width        : 4px;
    background   : rgba(126, 126, 126, 0.5);
    border-radius: 4px;
  }
}

/**
* 输入框的下拉框
* 说明：select、cascader、datepicker、timepicker、page的下拉框样式
*/

// 下拉框外形样式（select、datepicker、timepicker、cascader）
@input-drawdown-border : 1px solid @text-color-sub;
@input-drawdown-bg     : #345160;

// 下拉框内容选中项（select、datepicker、timepicker、cascader）
@input-drawdown-item-text          : #D3D6D9; // 下拉文本-颜色
@input-drawdown-item-text-hover    : #D3D6D9; // 下拉文本-颜色-悬浮
@input-drawdown-item-text-active   : @main-color; // 下拉文本-颜色-选中
@input-drawdown-item-text-disabled : @text-color-disabled; // 下拉文本-颜色-选中
@input-drawdown-item-bg-hover      : #3A3A3A; // 下拉选型悬浮状态背景
@input-drawdown-item-bg-active     : #3A3A3A; // 下拉选项选中状态背景
@input-drawdown-inner-border       : 1px solid #303030; // 下拉框内部边框（浅色）

/** 日期、时间时间选择器下拉框（datepicker、timepicker） */
@datepicker-weekday-color      : #fff;
@datepicker-cell-color         : @text-color; // 普通cell文字颜色
@datepicker-cell-not-this-month: rgba(216, 216, 216, 0.3); // 上一月或下一月cell文字颜色
@datepicker-cell-hover-bg      : rgba(153, 255, 231, 0.1); // 悬浮背景色
@datepicker-cell-selected-bg   : @main-color; // 选中时背景色
@datepicker-cell-focus-bg      : @bg-disabled; // 选中后背景色
@datepicker-cell-disabled-bg   : @bg-disabled; // 禁用背景色
@datepicker-active-text        : #282828; // 激活文本颜色
@datepicker-hover-text         : #282828;


// 输入框下拉样式（边框&背景）
.input-drawdown-view {
  background: #282828;
}

// select框（IviewSelect、IviewPage）
.select-dropdown {
  background   : #282828;
  box-shadow   : 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  left         : auto !important; // page下拉框初次显示时会有问题
  .input-show-scroll();

  .ivu-select-item {
    font-size: @input-font-size;
    color    : @input-drawdown-item-text;

    &.ivu-select-item-selected {
      color: @main-color;
      .bg(@input-drawdown-item-bg-active) !important;

      // &.ivu-select-item-focus {
      //   .bg(#3A3A3A);
      // }
    }

    &:hover {
      .bg(@input-drawdown-item-bg-active);
    }

    &.ivu-select-item-disabled {
      opacity: 0.5;
    }

    &.ivu-select-item-focus {
      .bg(transparent);
    }
  }
}

// 时间、日期选择器确认按钮（IviewDatePicker、IviewTimePicker）
.datetime-picker-confirm {
  border-top: @input-drawdown-inner-border;

  .ivu-btn-default {
    .border(transparent);
    .bg(transparent);
    box-shadow: none;
    color     : @main-color;
  }

  .ivu-btn-primary {
    color        : #d3d6d9;
    line-height  : 25px;
    background   : rgba(255, 255, 255, 0.1);
    box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.48);
    border-radius: 3px;
    border       : 1px solid #666666;
  }
}

.time-picker-cells-list {
  border-left: 1px solid #303030;
  .input-show-scroll();

  .ivu-time-picker-cells-ul {
    .ivu-time-picker-cells-cell {
      &:hover {
        .bg(@input-drawdown-item-bg-active);
      }

      &.ivu-time-picker-cells-cell-selected {
        color: @main-color;
        .bg(@input-drawdown-item-bg-active);
      }
    }
  }
}